<template>
  <div class="posts-container" :class="{ 'light-theme': themeStore.isLight }">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>帖子管理</span>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索帖子标题或内容"
              prefix-icon="Search"
              clearable
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            />
            <el-select
              v-model="statusFilter"
              placeholder="状态筛选"
              clearable
              @change="handleSearch"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="categoryFilter"
              placeholder="分类筛选"
              clearable
              @change="handleSearch"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </div>
      </template>

      <!-- 帖子列表 -->
      <el-table
        :data="postList"
        style="width: 100%"
        v-loading="loading"
        border
        :fit="true"
        class="post-table"
        row-class-name="table-row"
        :cell-class-name="tableCellClassName"
        size="small"
      >
        <!-- 序号 -->
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <!-- 发布人 -->
        <el-table-column label="发布人" width="100">
          <template #default="scope">
            <div class="author-info" v-if="scope.row.author">
              <el-avatar :size="20" :src="scope.row.author.avatar" class="author-avatar" />
              <span class="author-name">{{ scope.row.author.nickname || scope.row.author.username || '未知用户' }}</span>
            </div>
            <span v-else class="unknown-user">未知用户</span>
          </template>
        </el-table-column>

        <!-- 帖子标题 -->
        <el-table-column prop="title" label="标题" min-width="100">
          <template #default="scope">
            <div class="title-cell">
              <span class="post-title-text">{{ scope.row.title || '无标题' }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 帖子内容 -->
        <el-table-column label="帖子内容" min-width="180">
          <template #default="scope">
            <div class="post-content">
              <div class="post-text">{{ truncateText(scope.row.content, 40) }}</div>
              <el-tooltip
                v-if="scope.row.content && scope.row.content.length > 40" 
                :content="scope.row.content"
                placement="top"
                :show-after="500"
              >
                <el-button type="primary" link size="small">查看全文</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <!-- 帖子图片 -->
        <el-table-column label="图片" width="80">
          <template #default="scope">
            <div class="image-cell">
              <el-image
                v-if="scope.row.image_url"
                style="width: 50px; height: 50px; object-fit: cover;"
                :src="scope.row.image_url"
                :preview-src-list="[scope.row.image_url]"
                preview-teleported
                fit="cover"
                class="table-image"
              />
              <span v-else class="no-image">无图片</span>
            </div>
          </template>
        </el-table-column>

        <!-- 分类 -->
        <el-table-column label="分类" width="80">
          <template #default="scope">
            <span>{{ scope.row.photo?.category || '未分类' }}</span>
          </template>
        </el-table-column>

        <!-- 发布时间 -->
        <el-table-column prop="create_time" label="发布时间" width="130">
          <template #default="scope">
            <div class="time-cell">
              <el-icon><Clock /></el-icon>
              <span>{{ formatDate(scope.row.photo?.uploaded_at || scope.row.create_time) }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <div class="status-container">
              <el-tag 
                :type="{
                  0: 'warning',
                  1: 'success',
                  2: 'danger',
                  3: 'info'
                }[scope.row.status]"
                class="status-tag"
                size="small"
              >
                {{ {
                  0: '审核中',
                  1: '已发布',
                  2: '已封禁',
                  3: '已删除'
                }[scope.row.status] || '未知' }}
              </el-tag>
              <el-tag v-if="scope.row.is_delete" type="danger" class="status-tag" size="small">已删除</el-tag>
            </div>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <div class="action-btn-group">
              <el-button 
                type="primary" 
                size="small" 
                @click="viewPostDetail(scope.row)"
                text
              >
                查看
              </el-button>
              <el-button 
                type="warning" 
                size="small" 
                @click="auditPost(scope.row)"
                v-if="scope.row.status !== 2 && !scope.row.is_delete"
                text
              >
                审核
              </el-button>
              <el-button 
                type="success" 
                size="small" 
                @click="unblockPost(scope.row)"
                v-if="scope.row.status === 2 && !scope.row.is_delete"
                text
              >
                解封
              </el-button>
              <el-popconfirm
                title="确定要删除这篇帖子吗?"
                @confirm="deletePost(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" size="small" text>删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 帖子详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="帖子详情" width="70%">
      <div v-if="currentPost" class="post-detail">
        <div class="post-header">
          <div class="post-title-section">
            <h2 class="post-title">{{ currentPost.title || '无标题' }}</h2>
            <div class="post-meta">
              <span class="post-time">发布时间: {{ formatDate(currentPost.create_time) }}</span>
              <span v-if="currentPost.update_time && currentPost.update_time !== '0001-01-01T00:00:00Z'" class="post-time">
                更新时间: {{ formatDate(currentPost.update_time) }}
              </span>
            </div>
          </div>
          <el-tag :type="getStatusType(currentPost.status)">
            {{ getStatusText(currentPost.status) }}
          </el-tag>
        </div>
        
        <!-- 发布人信息 -->
        <div class="post-author" v-if="currentPost.author">
          <el-avatar :size="36" :src="currentPost.author.avatar" class="author-detail-avatar" />
          <div class="author-details">
            <span class="author-detail-name">{{ currentPost.author.nickname || currentPost.author.username || '未知用户' }}</span>
            <div class="author-detail-meta">
              <span class="author-id">ID: {{ currentPost.author.id }}</span>
              <span v-if="currentPost.author.role" class="author-role">{{ currentPost.author.role }}</span>
            </div>
          </div>
        </div>
        
        <div class="post-content-full">
          {{ currentPost.content }}
        </div>
        
        <div v-if="currentPost.image_url" class="post-images">
          <h3 class="image-title">帖子图片</h3>
          <div class="image-detail-layout">
            <div class="image-container">
              <el-image
                :src="currentPost.image_url"
                :preview-src-list="[currentPost.image_url]"
                preview-teleported
                fit="contain"
                class="post-image"
              />
            </div>
            
            <div v-if="currentPost.photo" class="photo-info">
              <el-descriptions direction="vertical" :column="1" border size="small">
                <el-descriptions-item label="图片分类">{{ currentPost.photo.category || '未分类' }}</el-descriptions-item>
                <el-descriptions-item label="拍摄设备" v-if="currentPost.photo.device">{{ currentPost.photo.device }}</el-descriptions-item>
                <el-descriptions-item label="上传时间">{{ formatDate(currentPost.photo.uploaded_at) }}</el-descriptions-item>
                <el-descriptions-item v-if="currentPost.photo.focal_length" label="焦距">{{ currentPost.photo.focal_length }}</el-descriptions-item>
                <el-descriptions-item v-if="currentPost.photo.aperture" label="光圈">{{ currentPost.photo.aperture }}</el-descriptions-item>
                <el-descriptions-item v-if="currentPost.photo.iso" label="ISO">{{ currentPost.photo.iso }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        
        <el-divider />
        
        <div class="post-stats">
          <div class="stat-item">
            <el-icon><ChatLineSquare /></el-icon>
            <span>{{ currentPost.comment_count || 0 }} 评论</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon>
            <span>{{ currentPost.favorite_count || 0 }} 收藏</span>
          </div>
          <div class="stat-item">
            <el-icon><Thumb /></el-icon>
            <span>{{ currentPost.like_count || 0 }} 点赞</span>
          </div>
        </div>

        <div class="action-buttons">
          <el-button 
            type="warning" 
            size="small"
            @click="auditPost(currentPost)"
            v-if="currentPost.status !== 2 && !currentPost.is_delete"
            text
          >
            审核
          </el-button>
          <el-button 
            type="success" 
            size="small"
            @click="unblockPost(currentPost)"
            v-if="currentPost.status === 2 && !currentPost.is_delete"
            text
          >
            解除封禁
          </el-button>
          <el-popconfirm
            title="确定要删除这篇帖子吗?"
            @confirm="deletePost(currentPost)"
            :disabled="currentPost.is_delete"
          >
            <template #reference>
              <el-button type="danger" size="small" :disabled="currentPost.is_delete" text>删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      title="帖子审核"
      width="50%"
      :close-on-click-modal="false"
    >
      <div v-loading="auditLoading" class="audit-result">
        <el-alert
          v-if="auditResultData"
          :title="auditResultData.passed ? '审核通过' : '审核未通过'"
          :type="auditResultData.passed ? 'success' : 'warning'"
          :description="auditResultData.message || '无审核信息'"
          show-icon
          :closable="false"
          class="mb-20"
        />
        
        <el-descriptions v-if="auditResultData" title="详情" :column="1" border>
          <el-descriptions-item label="帖子ID">{{ auditResultData.post_id }}</el-descriptions-item>
          
          <el-descriptions-item label="标题审核">
            <el-tag :type="auditResultData.title_passed ? 'success' : 'danger'">
              {{ auditResultData.title_passed ? '通过' : '未通过' }}
            </el-tag>
            <span v-if="auditResultData.title_label" class="ml-10">
              违规类型: {{ auditResultData.title_label }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="内容审核">
            <el-tag :type="auditResultData.content_passed ? 'success' : 'danger'">
              {{ auditResultData.content_passed ? '通过' : '未通过' }}
            </el-tag>
            <span v-if="auditResultData.content_label" class="ml-10">
              违规类型: {{ auditResultData.content_label }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="审核消息">
            {{ auditResultData.message || '无' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false" size="small" text>取消</el-button>
          <el-button type="success" size="small" @click="handleApprovePost" :disabled="!auditResultData" text>通过</el-button>
          <el-button type="danger" size="small" @click="handleBlockPost" :disabled="!auditResultData" text>封禁</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { useThemeStore } from '@/stores/theme'
import { ChatLineSquare, Thumb, Star, Clock } from '@element-plus/icons-vue'

// 表格数据
const loading = ref(false)
const postList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const searchKeyword = ref('')
const statusFilter = ref('')
const categoryFilter = ref('')
//const tableRowClassName = () => 'compact-row'

// 状态选项
const statusOptions = [
  { value: 0, label: '审核中' },
  { value: 1, label: '已发布' },
  { value: 2, label: '已封禁' },
  { value: 3, label: '已删除' }
]

// 分类选项
const categoryOptions = [
  { value: '风景', label: '风景' },
  { value: '人物', label: '人物' },
  { value: '动物', label: '动物' },
  { value: '建筑', label: '建筑' },
  { value: '美食', label: '美食' },
  { value: '其他', label: '其他' }
]

// 对话框控制
const detailDialogVisible = ref(false)
const auditDialogVisible = ref(false)
const currentPost = ref(null)
const auditResultData = ref(null)
const auditLoading = ref(false)

const themeStore = useThemeStore()

// 格式化时间
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 截断文本
const truncateText = (text, maxLength) => {
  if (!text) return ''
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '审核中',
    1: '已发布',
    2: '已封禁',
    3: '已删除'
  }
  return statusMap[status] || '未知状态'
}

// 加载帖子列表
const loadPostList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      keyword: searchKeyword.value
    }
    
    // 只有当选择了具体状态时才添加 status 参数
    if (statusFilter.value !== '') {
      params.status = statusFilter.value
    }
    
    // 只有当选择了具体分类时才添加 category 参数
    if (categoryFilter.value !== '') {
      params.category = categoryFilter.value
    }

    const res = await request.get('/posts/list', { params })
    // 检查返回的数据结构
    if (Array.isArray(res.data.data)) {
      // 直接返回数组
      postList.value = res.data.data || []
      total.value = res.data.data.length || 0
    } else {
      // 分页结构
      postList.value = res.data.data.list || []
      total.value = res.data.data.total || 0
    }
  } catch (error) {
    console.error('加载帖子列表失败:', error)
    ElMessage.error('加载列表失败')
  } finally {
    loading.value = false
  }
}

// 查看帖子详情
const viewPostDetail = async (post) => {
  try {
    // 获取帖子详情
    const res = await request.get(`/posts/${post.id}`)
    currentPost.value = res.data.data
    detailDialogVisible.value = true
  } catch (error) {
    console.error('获取帖子详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

// 审核帖子
const auditPost = async (post) => {
  currentPost.value = post
  auditDialogVisible.value = true
  auditResultData.value = null
  auditLoading.value = true
  
  try {
    const postId = post.id
    // 直接调用审核API获取审核结果
    const res = await request.post(`/posts/${postId}/audit`)
    
    if (res.data.code === 0) {
      auditResultData.value = res.data.data
    } else {
      ElMessage.error(`获取审核信息失败: ${res.data.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('获取审核信息失败:', error)
    ElMessage.error('获取审核信息失败')
  } finally {
    auditLoading.value = false
  }
}

// 通过帖子
const handleApprovePost = async () => {
  if (!currentPost.value) return
  
  try {
    const postId = currentPost.value.id
    const params = {
      id: postId,
      status: 1 // 通过
    }
    
    const res = await request.post(`/posts/status`, params)
    
    if (res.data.code === 0) {
      ElMessage.success('帖子审核通过，即将进行图片审核')
      
      // 更新当前帖子状态
      if (currentPost.value) {
        currentPost.value.status = 1
      }
      
      // 关闭帖子审核对话框
      auditDialogVisible.value = false
      
      // 如果帖子包含图片，继续审核图片
      if (currentPost.value && currentPost.value.photo && currentPost.value.photo.id) {
        // 延迟一下再打开图片审核，让用户感知到流程
        setTimeout(() => {
          auditImage(currentPost.value.photo)
        }, 500)
      } else {
        // 如果没有图片，直接刷新列表
        loadPostList()
      }
    } else {
      ElMessage.error(`操作失败: ${res.data.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('审核操作失败:', error)
    ElMessage.error('操作失败')
  }
}

// 封禁帖子
const handleBlockPost = async () => {
  if (!currentPost.value) return
  
  try {
    const postId = currentPost.value.id
    const params = {
      id: postId,
      status: 2 // 封禁
    }
    
    const res = await request.post(`/posts/status`, params)
    
    if (res.data.code === 0) {
      ElMessage.success('帖子已封禁')
      
      // 更新当前帖子状态
      if (currentPost.value) {
        currentPost.value.status = 2
      }
      
      // 如果帖子包含图片，同时封禁图片
      if (currentPost.value && currentPost.value.photo && currentPost.value.photo.id) {
        try {
          await request.post(`/photo/status`, {
            id: currentPost.value.photo.id.toString(),
            status: "2" // 封禁图片
          })
          ElMessage.info('关联图片已同步封禁')
          
          if (currentPost.value && currentPost.value.photo) {
            currentPost.value.photo.status = 2
          }
        } catch (photoError) {
          console.error('封禁图片失败:', photoError)
          ElMessage.warning('帖子已封禁，但关联图片封禁失败')
        }
      }
      
      // 关闭审核对话框
      auditDialogVisible.value = false
      
      // 刷新帖子列表
      loadPostList()
    } else {
      ElMessage.error(`操作失败: ${res.data.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('审核操作失败:', error)
    ElMessage.error('操作失败')
  }
}

// 审核图片
const auditImage = async (image) => {
  if (!image || !image.id) {
    ElMessage.error('无效的图片信息')
    return
  }
  
  try {
    const res = await request.post(`/photo/audit/${image.id}`)
    if (res.data && res.data.data) {
      const auditResult = res.data.data
      
      // 显示图片审核结果
      ElMessageBox.confirm(
        `图片审核${auditResult.passed ? '通过' : '不通过'}\n${auditResult.message || ''}`,
        '图片审核结果',
        {
          confirmButtonText: auditResult.passed ? '确认通过' : '封禁',
          cancelButtonText: '取消',
          type: auditResult.passed ? 'success' : 'warning',
          showCancelButton: true
        }
      ).then(async () => {
        // 用户点击确认
        if (auditResult.passed) {
          // 图片审核通过
          await updateImageStatus(image.id, 1)
          ElMessage.success('图片审核通过')
          loadPostList()
        } else {
          // 图片审核不通过，封禁图片并同时封禁帖子
          await updateImageStatus(image.id, 2)
          
          // 如果有关联的帖子，也封禁帖子
          if (currentPost.value && currentPost.value.id) {
            try {
              await request.post(`/posts/status`, {
                id: currentPost.value.id,
                status: 2 // 封禁帖子
              })
              ElMessage.info('由于图片违规，帖子已同步封禁')
            } catch (postError) {
              console.error('封禁帖子失败:', postError)
              ElMessage.warning('图片已封禁，但关联帖子封禁失败')
            }
          }
          
          loadPostList()
        }
      }).catch(() => {
        // 用户取消操作
        ElMessage.info('已取消图片审核操作')
      })
    }
  } catch (error) {
    console.error('审核图片失败:', error)
    ElMessage.error('图片审核失败：' + (error.message || '未知错误'))
  }
}

// 更新图片状态
const updateImageStatus = async (imageId, status) => {
  if (!imageId) {
    ElMessage.error('无法获取图片信息')
    return
  }
  try {
    await request.post(`/photo/status`, {
      id: imageId.toString(),
      status: status.toString()
    })
    return true
  } catch (error) {
    console.error('更新图片状态失败:', error)
    ElMessage.error('更新图片状态失败：' + (error.message || '未知错误'))
    return false
  }
}

// 解除封禁
const unblockPost = async (post) => {
  try {
    await ElMessageBox.confirm(`确定要解除对帖子 ID: ${post.id} 的封禁吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const postId = post.id
    const params = {
      id: postId,
      status: 1 // 解除封禁，设置为已发布状态
    }
    
    const res = await request.post(`/posts/status`, params)
    
    if (res.data.code === 0) {
      ElMessage.success('解除封禁成功')
      
      // 如果是在详情页操作，更新当前帖子状态
      if (detailDialogVisible.value && currentPost.value && currentPost.value.id === post.id) {
        currentPost.value.status = 1 // 设置为已发布状态
        
        // 如果有关联图片，也更新图片状态
        if (currentPost.value.photo && currentPost.value.photo.id) {
          try {
            await request.post(`/photo/status`, {
              id: currentPost.value.photo.id.toString(),
              status: "1" // 解除图片封禁
            })
            currentPost.value.photo.status = 1
          } catch (photoError) {
            console.error('解除图片封禁失败:', photoError)
            ElMessage.warning('帖子已解除封禁，但关联图片解除封禁失败')
          }
        }
      }
      
      loadPostList()
    } else {
      ElMessage.error(`解除封禁失败: ${res.data.msg || '未知错误'}`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('解除封禁失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

// 删除帖子
const deletePost = async (post) => {
  try {
    await request.delete(`/posts/${post.id}`)
    ElMessage.success('删除成功')
    
    // 如果是在详情页删除，关闭详情页
    if (detailDialogVisible.value) {
      detailDialogVisible.value = false
    }
    
    loadPostList()
  } catch (error) {
    console.error('删除帖子失败:', error)
    ElMessage.error('删除失败')
  }
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  loadPostList()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  loadPostList()
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  
  loadPostList()
}

// 设置表格单元格class
const tableCellClassName = () => {
  return 'compact-cell'
}

// 首次加载
onMounted(() => {
  loadPostList()
})
</script>

<style scoped>
.posts-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.search-box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box .el-input {
  width: 220px;
}

.search-box .el-select {
  width: 120px;
}

/* 表格样式优化 */
.post-table {
  margin-top: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
}

.post-table :deep(th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  padding: 4px 0;
  font-size: 12px;
  height: 28px;
  text-align: center;
}

.post-table :deep(td) {
  padding: 3px 2px;
  vertical-align: middle;
  font-size: 12px;
  height: auto;
}

.compact-cell {
  padding: 0 !important;
}

.post-table :deep(.el-table__header) {
  border-bottom: 1px solid #ebeef5;
}

.table-row {
  height: auto !important;
}

.table-row:hover {
  background-color: #f9fafc !important;
}

.post-table :deep(.el-table__row) {
  transition: all 0.3s;
  height: auto !important;
}

.post-table :deep(.cell) {
  padding-left: 5px;
  padding-right: 5px;
  line-height: 1.2;
}

.action-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  padding: 2px;
}

.post-table :deep(.el-button--small) {
  padding: 1px 5px;
  font-size: 11px;
  min-height: 20px;
  height: 20px;
  line-height: 1;
}

.post-table :deep(.el-button) {
  margin: 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.pagination-container :deep(.el-pagination) {
  padding: 5px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.post-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.2;
  padding: 1px 0;
  max-height: 32px;
  font-size: 12px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.author-avatar {
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 20px !important;
  height: 20px !important;
}

.author-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  max-width: 60px;
}

.unknown-user {
  color: #909399;
  font-style: italic;
  font-size: 11px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s;
}

.post-author:hover {
  background-color: #f0f2f5;
}

.author-detail-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-detail-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.author-detail-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.author-id {
  font-size: 12px;
  color: #909399;
}

.author-role {
  font-size: 12px;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 6px;
  border-radius: 4px;
}

.image-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 12px;
}

/* 详情页样式 */
.post-detail {
  padding: 20px;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.post-title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-title {
  font-size: 18px;
  font-weight: bold;
}

.post-meta {
  display: flex;
  gap: 10px;
  color: #909399;
  font-size: 12px;
}

.post-content-full {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.post-images {
  margin: 20px 0;
}

.image-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #606266;
}

.image-detail-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
}

.post-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 4px;
}

.photo-info {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
}

.post-stats {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.audit-form {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.audit-result {
  padding: 20px;
}

.audit-result :deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
}

.audit-result :deep(.el-descriptions__content) {
  line-height: 1.6;
}

/* 暗色主题适配 */
.light-theme.posts-container {
  background-color: #f5f7fa;
}

.light-theme .el-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 主题样式 */
:deep(.el-carousel__item) {
  border-radius: 8px;
  overflow: hidden;
}

.status-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.status-tag {
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 2px;
}

.image-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 0;
}

.table-image {
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.table-image:hover {
  transform: scale(1.05);
}

.no-image {
  color: #909399;
  font-size: 11px;
  font-style: italic;
}

.info-icon {
  color: #909399;
  cursor: pointer;
}

.info-icon:hover {
  color: #409EFF;
}

.post-title-text {
  font-weight: 500;
  color: #303133;
  transition: color 0.2s;
  font-size: 12px;
}

.post-title-text:hover {
  color: #409EFF;
  cursor: pointer;
}

.title-cell {
  padding: 1px 0;
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #606266;
  font-size: 12px;
}

.time-cell :deep(.el-icon) {
  font-size: 11px;
}
</style> 